@extends('layouts.buz.layout', ['header_active' => 'settle'])
@section('full-content')

    @include('layouts.buz.sidebar.remit', ['active' => 'topay'])

    <div class="yhy-member col-sm-9 col-sm-push-3 col-md-10 col-md-push-2 col-xs-12">
        @include('buz.remit.labatitle')
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    代付
                    <button type="button" class="btn btn-primary right" id="btnBatch">批量代付</button>
                    <button type="button" class="btn btn-primary right" style="margin-right: 20px" id="btnReview">复核</button>
                </h4>
            </div>
            <div class="panel-body">
                <form class="form-horizontal member" role="form" id="topayForm">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="firstname" class="col-sm-3 control-label">提现金额</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="money">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="firstname" class="col-sm-3 control-label">收款方姓名</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="bk_username">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="firstname" class="col-sm-3 control-label">账户类型</label>
                                <div class="col-sm-8 y-mt6">
                                    <input type="radio" value="1" name="property" checked="checked" />&nbsp;企业&nbsp;&nbsp;&nbsp;
                                    <input type="radio" value="0" name="property" />&nbsp;个人
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">收款方开户行</label>
                                <div class="col-sm-8">
                                    <select class="form-control col-sm-3" name="bk_category" id="bk_category">

                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="firstname" class="col-sm-3 control-label">收款方开户银行卡号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="bk_account">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">地址</label>

                                <div class="col-sm-4">
                                    <select class="form-control" id ="SelProvince" >
                                        <option value="">请选择省</option>
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <select class="form-control" id ="SelCity" name="city_id"  disabled>
                                        <option value="" class="default">请选择市</option>
                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="firstname" class="col-sm-3 control-label">开户支行名称</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="bk_branch">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row companyAttr">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">联行号</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" name="bk_number">
                                </div>
                                <div class="col-sm-3">
                                    <a class="btn btn-default" href="http://www.lianhanghao.com/" target="_blank" role="button">查询联行号</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">打款理由</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="remark">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 textRight">验证码：</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" name="sms_code">
                                </div>
                                <div class="col-sm-4">
                                    <button type="button" class="btn btn-info" id="singleToplaySendCode">发送验证码</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="firstname" class="col-sm-3 textRight">交易密码：</label>
                                <div class=" col-sm-5">
                                    <input type="password" class="form-control" name="trade_pwd">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="firstname" class="col-sm-3 control-label"></label>
                                <div class="col-sm-8">
                                    <button type="button" class="btn btn-primary" onclick="confirmTopay()">下一步</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endsection()
@section('dialog')
    {{--批量代付弹窗--}}
<div class="modal fade in" id="accountTopayMore" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header y-modal-header-default">
                <h3 class="y-mg0">批量代付
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal y-mt15 ng-pristine ng-valid" action="" id="batchForm" method="post" enctype="multipart/form-data">
                    <fieldset>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="">付款文件：</label>
                            <div class="col-sm-8">
                                <input class="y-mt10" type="file" name="batch_file">
                                <p class="text-left y-mt10">模板文件下载：
                                    <a href="{{route('buz.remit.batchFile')}}" class="btn btn-link">模板文件</a>
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-3 textRight">验证码：</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" name="sms_code">
                            </div>
                            <div class="col-sm-4">
                                <button type="button" class="btn btn-info" id="moreToplaySendCode">发送验证码</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 textRight">交易密码：</label>
                            <div class=" col-sm-5">
                                <input type="password" class="form-control" name="trade_pwd">
                            </div>
                        </div>

                    </fieldset>
                </form>
            </div>
            <div class="modal-footer y-modal-footer-default">
                <button type="button" class="btn y-btn-blue center-block" id="batchNext">下一步</button>
            </div>
        </div>
    </div>
</div>
    {{--复核弹窗--}}
    <div class="modal fade in" tabindex="-1" role="dialog" aria-hidden="true" id="accountReview">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header y-modal-header-default">
                    <h3 class="y-mg0">复核<small style="color: #ff0000;">请在30分钟内完成复核，否则订单无效</small>
                        <button type="button" class="close" >
                            <span class="close" data-dismiss="modal" aria-hidden="true">×</span>
                        </button>
                    </h3>
                </div>
                <div class="modal-body pt0" id="reviewBody">


                </div>
                <div class="modal-footer y-modal-footer-default">
                    <button type="button" class="btn btn-info" onclick="return confirmReview()">复核通过</button>
                    <button type="button" class="btn btn-danger" onclick="return refuseReview()">拒绝</button>
                </div>
            </div>
        </div>

    </div>
@endsection()
@section('bottom_js')
    <script src="{{asset('js/buz/template-web.js')}}"></script>
    <script id="provinceOption" type="text/html">
        @{{each data  value }}
        <option value="@{{ value.id}}">@{{ value.name}}</option>
        @{{/each}}
    </script>
    <script id="cityOption" type="text/html">
        @{{each data  value }}
        <option value="@{{ value.id}}">@{{ value.name}}</option>
        @{{/each}}
    </script>
    <script id="bankOption" type="text/html">
        @{{each data  value }}
        <option value="@{{ value.id}}">@{{ value.name}}</option>
        @{{/each}}
    </script>
    <script id="reviewHtml" type="text/html">
        <div class="row y-mlr0 y-bb1">
            <div class="col-sm-3">
                <div class="y-transition-color-info mt40">
                    <p class="y-fw-n">总笔数</p>
                    <div class="y-box-sm y-transition-border-color-info"><span class="spanYell" id="spanEntrustCount">@{{ total.num }}</span></div>
                </div>
            </div>
            <div class="col-sm-3 yhy-account-head-center y-ml-1">
                <div class="y-transition-color-info mt40">
                    <p>商家实付(元)</p>
                    <div class="y-box-sm y-transition-border-color-info"><span class="spanYell" id="spanEntrustAmount">@{{ total.ac_money }}</span></div>
                </div>
            </div>
            <div class="col-sm-6">
                <form class="form-horizontal mt20" role="form">
                    <div class="form-group">
                        <label for="lastname" class="col-sm-3 textRight">验证码：</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="sms_code" id="reviewSmsCode">
                        </div>
                        <div class="col-sm-4">
                            <button type="button" class="btn btn-info" id="reviewSendCode">发送验证码</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 textRight">交易密码：</label>
                        <div class=" col-sm-5">
                            <input type="password" class="form-control" name="trade_pwd" id="reviewTradePwd">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="table-responsive mt20">
            <table class="table table-striped table-hover table-bordered y-ws-n y-table-md">
                <thead>
                <tr>
                    <th>账户类型</th>
                    <th>开户行名称</th>
                    <th>开户银行</th>
                    <th>开户行账号</th>
                    <th>开户行省</th>
                    <th>开户行市</th>
                    <th>分支行名称</th>
                    <th>开户银联号</th>
                    <th>代付金额</th>
                    <th>手续费 </th>
                    <th>实际扣款 </th>
                    <th>备注信息</th>

                </tr>
                </thead>
                <tbody>
                @{{ each list value }}
                <tr>
                @{{ if value.property == 0 }}
                <td>个人</td>
                @{{ /if }}
                @{{ if value.property == 1 }}
                <td>企业</td>
                @{{ /if }}
                <td>@{{  value.bk_username}}</td>
                <td>@{{  value.bk_name}}</td>
                <td>@{{  value.bk_account}}</td>
                <td>@{{  value.bk_prov}}</td>
                <td>@{{  value.bk_city}}</td>
                <td>@{{  value.bk_branch}}</td>
                <td>@{{  value.bk_number}}</td>
                <td>@{{  value.money}}</td>
                <td>@{{  value.fee}}</td>
                <td>@{{  value.ac_money}}</td>
                <td>@{{  value.remark}}</td>

                </tr>
                @{{ /each }}
                {{--@{{ if list.length <=0 }}--}}
                {{--<tr>--}}
                    {{--<td colspan="14" style="text-align:center;">暂时未查询到任何记录</td>--}}
                {{--</tr>--}}
                {{--@{{ /if }}--}}
                </tbody>
            </table>
        </div>
    </script>
    <script>
        $('#topayForm').bootstrapValidator({
            message: '这个值没有被验证',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                money: {
                    message: '提现金额不能为空',
                    validators: {
                        notEmpty: {
                            message: '提现金额不能为空'
                        }

                    }
                },
                property: {
                    message: '账户类型不能为空',
                    validators: {
                        notEmpty: {
                            message: '账户类型不能为空'
                        }
                    }
                },
                bk_username: {
                    message: '收款人姓名不能为空',
                    validators: {
                        notEmpty: {
                            message: '收款人姓名不能为空'
                        }
                    }
                },
                bk_category: {
                    message: '开户行不能为空',
                    validators: {
                        notEmpty: {
                            message: '开户行不能为空'
                        }
                    }
                },
                bk_branch: {
                    message: '开户支行名称不能为空',
                    validators: {
                        notEmpty: {
                            message: '开户支行名称不能为空'
                        }
                    }
                },
                bk_account: {
                    message: '开户银行卡号不能为空',
                    validators: {
                        notEmpty: {
                            message: '开户银行卡号不能为空'
                        }
                    }
                },
                remark: {
                    message: '打款理由不能为空',
                    validators: {
                        notEmpty: {
                            message: '打款理由不能为空'
                        }
                    }
                },
                city_id: {
                    message: '地址不能为空',
                    validators: {
                        notEmpty: {
                            message: '地址不能为空'
                        }
                    }
                },
                sms_code: {
                    message: '短信验证码不能为空',
                    validators: {
                        notEmpty: {
                            message: '短信验证码不能为空'
                        }
                    }
                },
                trade_pwd: {
                    message: '交易密码不能为空',
                    validators: {
                        notEmpty: {
                            message: '交易密码不能为空'
                        }
                    }
                },
                bk_number: {
                    message: '交易密码不能为空',
                    validators: {
                        notEmpty: {
                            message: '交易密码不能为空'
                        }
                    }
                }
            }
        });
        //拒绝复核
        function refuseReview(){
            $("#reviewBody").modal("hidden");
        }
        //复核
        function confirmReview() {
            var toPayId = localStorage.getItem("toPayId");
            var smsCode = $("#reviewSmsCode").val();
            var tradePwd = $("#reviewTradePwd").val();
            if(toPayId == ""){showMsg("无订单可复核");return false;}
            if(smsCode == ""){showMsg("请输入验证码");return false;}
            if(tradePwd == ""){showMsg("请输入交易密码");return false;}
            var data = {"toPayId":toPayId,"sms_code":smsCode,"trade_pwd":tradePwd};
            $.ajax({
                url: "/api/order/topay/review",
                data: data,
                type: 'post',
                success:function(data){
                    console.log(data);
                    if(filterAjaxData(data)){
                       location = location;
//                    }else {
//                        showMsg(data.message);
                    }

                }
            });
        }
        //批量代付
        $('#batchForm').bootstrapValidator({
            message: '这个值没有被验证',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                trade_pwd: {
                    message: '交易密码不能为空',
                    validators: {
                        notEmpty: {
                            message: '交易密码不能为空'
                        }

                    }
                },
                sms_code: {
                    message: '手机验证码不能为空',
                    validators: {
                        notEmpty: {
                            message: '手机验证码不能为空'
                        }

                    }
                },
                batch_file: {
                    message: '请上传文件',
                    validators: {
                        notEmpty: {
                            message: '请上传文件'
                        }

                    }
                }
            }
        });
        //单笔代付提交
        function confirmTopay(){
            var bootstrapValidator = $('#topayForm').data("bootstrapValidator");
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid()){
                var data = $("#topayForm").serialize();
                console.log(data);
                $.ajax({
                    url: "/api/order/topay/single",
                    data: data,
                    type: 'post',
                    success:function(data){
                        if(filterAjaxData(data)){
                            $("#accountReview").modal("toggle");
                            var toPayId = data.data.toPayId;
                            localStorage.setItem("toPayId",toPayId);
                            var html = template('reviewHtml', data.data);
                            document.getElementById('reviewBody').innerHTML = html;
//                        }else {
//                            showMsg(data.message);
                        }

                    }

                });
            }
        }
        //初始化省
        $.ajax({
            url: "/api/tool/cities",
            type: 'get',
            success: function (data) {
                if (filterAjaxData(data)) {
                    console.log(data);
                    var provinceHtml = template('provinceOption', data);
                    $("#SelProvince").append(provinceHtml);

                } else {
                    showMsg(data.message);
                }
            }
        });
        //选择市
        $("#SelProvince").change(function () {
            var _id = $(this).val();

            console.log(_id);
            $.ajax({
                url: "/api/tool/cities?parent=" + _id,
                type: 'get',
                success: function (data) {
                    if (filterAjaxData(data)) {
                        console.log(data);
                        $("#SelCity").attr("disabled", false);
                        var cityHtml = template('cityOption', data);
                        $("#SelCity .default").siblings().remove();
                        $("#SelCity").append(cityHtml);

                    } else {
                        showMsg(data.message);
                    }
                }
            })
        });
        //初始化银行
        $.ajax({
            url: "/api/tool/banks",
            type: 'get',
            success: function (data) {
                if (filterAjaxData(data)) {
                    console.log(data);
                    var SelBusiTypeHtml = template('bankOption', data);
                    $("#bk_category").append(SelBusiTypeHtml);

                } else {
                    showMsg(data.message);
                }
            }
        });
//        $.ajax({
//            url: "/api/profile/assets",
//            type: 'get',
//            success: function (data) {
//                if (filterAjaxData(data)) {
//                    console.log(data);
//                    var balance = parseFloat(data.data.asset.recharge_frozen)+parseFloat(data.data.asset.available);
//                    $("#available").text("￥"+data.data.asset.available);
//                    $("#balance").text("￥"+balance);
//                    $("#recharge").text("￥"+data.data.asset.recharge_frozen);
//                    $("#withdraw").text("￥"+data.data.asset.withdraw_frozen);
//
//                } else {
//                    showMsg(data.message);
//                }
//            }
//        });
        //发送验证码
        function getPaycode(btn) {
            $.ajax({
                url: "/api/tool/sms/remit",
                data: {type: 4},
                type: 'post',
                success:function(data){
                    if(data.code == 0){
                        setTime(btn);
                        showMsg("发送成功");
                    }else {
                        showMsg(data.message);
                    }
                }
            });
        }
        $(function(){
            //打开批量代付窗口
            $("#btnBatch").click(function(){
                $("#accountTopayMore").modal('toggle');
            });
            //单笔代付发送验证码
            $("#singleToplaySendCode").click(function(){
                var that = $(this);
                getPaycode(that);
            });
            //批量代付发送验证码
            $("#moreToplaySendCode").click(function(){
                var that = $(this);
//                setTime(that);
                getPaycode(that);
            });
            //复核代付发送验证码
            $("#reviewBody").delegate("#reviewSendCode", "click", function(){
                var that = $(this);
//                setTime(that);
                getPaycode(that);
            });

            $("input[name='property']").click(function(){
                var pvalue = $(this).val();
                if(pvalue == 0){
                    $(".companyAttr").hide();
                }else{
                    $(".companyAttr").show();
                }
            });
        });

        //点击复核
        $("#btnReview").click(function(){
            var toPayId = localStorage.getItem("toPayId");
            if(toPayId){
                $.ajax({
                    url: "/api/order/topay/review?toPayId="+toPayId,
                    type: 'get',
                    success:function(data){
                        console.log(data);
                        if(filterAjaxData(data)){
                            $("#accountReview").modal("toggle");
//                            var toPayId = data.data.toPayId;
//                            localStorage.setItem("toPayId",toPayId);
                            var html = template('reviewHtml', data.data);
                            document.getElementById('reviewBody').innerHTML = html;
//                        }else {
//                            showMsg(data.message);
                        }

                    }

                });
            }else{
                showMsg("没有复核订单");
            }
        });
        // 批量代付提交
        $("#batchNext").click(function(){
            var bootstrapValidator = $('#batchForm').data("bootstrapValidator");
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid()){
                var formData = new FormData($("#batchForm")[0]);
                $.ajax({
                    type : "post",
                    url : "/api/order/topay/batch",
                    data : formData,
                    contentType: false, //必须
                    processData: false, //必须
                    beforeSend: function () {
                        $("#batchNext").attr('disabled', 'disabled');
                    },
                    success : function(data){
                        if (filterAjaxData(data)) {
                            $("#accountReview").modal("toggle");
                            var toPayId = data.data.toPayId;
                            localStorage.setItem("toPayId",toPayId);
                            var html = template('reviewHtml', data.data);
                            document.getElementById('reviewBody').innerHTML = html;
                        }else {
                            $("#accountTopayMore").modal('toggle');
                            $("#accountReview").modal("toggle");
                            showMsg(data.message);
                            $("#batchNext").removeAttr('disabled');
                        }
                    },
                    dataType: "json"
                });
            }

        });
    </script>
@endsection()
